<!--
 * @description 轮播组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view class="pure-swiper" :class="_classes" :style="_styles">
		<swiper
			class="pure-swiper__swiper"
			:active-class="$attrs.activeClass || $attrs['active-class']"
			:changing-class="$attrs.changingClass || $attrs['changing-class']"
			:autoplay="$attrs.autoplay"
			:current-item-id="$attrs.currentItemId || $attrs['current-item-id']"
			:interval="$attrs.interval"
			:duration="$attrs.duration"
			:circular="$attrs.circular"
			:vertical="$attrs.vertical"
			:previous-margin="
				$attrs.previousMargin || $attrs['previous-margin']
			"
			:next-margin="$attrs.nextMargin || $attrs['next-margin']"
			:acceleration="$attrs.acceleration"
			:disable-programmatic-animation="
				$attrs.disableProgrammaticAnimation ||
				$attrs['disable-programmatic-animation']
			"
			:display-multiple-items="
				$attrs.displayMultipleItems || $attrs['display-multiple-items']
			"
			:skip-hidden-item-layout="
				$attrs.skipHiddenItemLayout || $attrs['skip-hidden-item-layout']
			"
			:disable-touch="$attrs.disableTouch || $attrs['disable-touch']"
			:touchable="$attrs.touchable"
			:easing-function="
				$attrs.easingFunction || $attrs['easing-function']
			"
			:current="current"
			@change="$emit('change', $event)"
			@transition="$emit('transition', $event)"
			@animationfinish="$emit('animationfinish', $event)"
		>
			<swiper-item
				class="pure-swiper__swiper__item"
				v-for="(item, index) in list"
				:key="index"
				@tap="_handleItemTap(item, index)"
				:hover-class="$attrs.hoverClass || $attrs['hover-class']"
			>
				<slot :item="item" :index="index">
					<pure-image
						width="100%"
						height="100%"
						:src="item.src"
						:mode="mediaMode"
						class="pure-swiper__image"
					></pure-image>
				</slot>
			</swiper-item>
		</swiper>

		<!-- 指示器 -->
		<view
			class="pure-swiper__indicator"
			v-if="indicator || $slots.indicator"
		>
			<slot name="indicator">
				<pure-indicator
					v-bind="indicatorProps"
					:total="list?.length"
					:current="current"
					:list="list"
					:mode="mode"
					:static="static"
					@change="_handleIndicatorChange"
				></pure-indicator>
			</slot>
		</view>

		<!-- 切换器 -->
		<view class="pure-swiper__prev-next" v-if="prevNext || $slots.prevNext">
			<pure-prev-next
				:disablePrev="_disablePrev"
				:disableNext="_disableNext"
				v-bind="prevNextProps"
				@prev="_handlePrev"
				@next="_handleNext"
			></pure-prev-next>
		</view>
	</view>
</template>

<script>
import commonComponentOptions from "../../config/common-component-options";
export default {
	options: commonComponentOptions,
};
</script>

<script setup>
import { ref, computed, useAttrs } from "vue";
import props from "./props";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************

// **************************************************************************************************************
// * Attrs
// **************************************************************************************************************
const _attrs = useAttrs();

// **************************************************************************************************************
// * Options
// **************************************************************************************************************
defineOptions(commonComponentOptions);

// **************************************************************************************************************
// * Props
// **************************************************************************************************************
const _props = defineProps(props);

// **************************************************************************************************************
// * Emits
// **************************************************************************************************************
const _emits = defineEmits([
	"change",
	"transition",
	"animationfinish",
	"itemTap",
]);

// **************************************************************************************************************
// * Classes
// **************************************************************************************************************
const _classes = computed(() => {
	const array = [];
	return array;
});

// **************************************************************************************************************
// * Styles
// **************************************************************************************************************
const _styles = computed(() => {
	const array = [];

	// 宽高
	if (_props.width) array.push(`--pure-swiper-width: ${_props.width};`);
	if (_props.height) array.push(`--pure-swiper-height: ${_props.height};`);

	return array;
});

// **************************************************************************************************************
// * Computed
// **************************************************************************************************************
// 禁用上一个？
const _disablePrev = computed(() => {
	if (_attrs?.circular) return false;
	return _props.current === 0;
});

// 禁用下一个？?
const _disableNext = computed(() => {
	if (_attrs?.circular) return false;
	return _props.current === _props.list.length - 1;
});

// **************************************************************************************************************
// * Functions
// **************************************************************************************************************
// 点击事件
function _handleItemTap(item, index) {
	_emits("itemTap", item, index);

	// 预览
	if (_props.preview) _previewMedia(item, index);
}

// 预览资源
function _previewMedia(_, index) {
	uni.previewImage({
		current: index,
		urls: _props.list.map((item) => item[_props.keyName]),
	});
}

// 指示器切换导致的变化事件
function _handleIndicatorChange(index) {
	_emits("change", {
		detail: {
			current: index,
			source: "indicator",
		},
	});
}

// 上一个
function _handlePrev() {
	let index =
		_props.current === 0 ? _props.list.length - 1 : _props.current - 1;
	_emits("change", {
		detail: {
			current: index,
			source: "prevNext",
		},
	});
}

// 下一个
function _handleNext() {
	let index =
		_props.current === _props.list.length - 1 ? 0 : _props.current + 1;
	_emits("change", {
		detail: {
			current: index,
			source: "prevNext",
		},
	});
}
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>
